{% comment %}
    Renders a product card

    Accepts:
    - product_card_product: {Object} Product Liquid object (optional)
    - media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - add_image_padding: {Boolean} Enables padding on the image to space out the grid
    - show_vendor: {Boolean} Show the product vendor. Default: false

    Usage:
    {% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{%- liquid
  assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

  if product_card_product.featured_media.aspect_ratio == nil
    assign featured_media_aspect_ratio = 1
  endif
-%}
<div class="card w-100 border-0 py-3 py-md-4 px-3">
  <a {% if product_card_product.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ product_card_product.url | default: '#' }}" class="stretched-link"></a>
  <figure class="mb-0 medio {% if product_card_product.media[1] != nil and show_secondary_image != blank %}secondImg{% endif %} ratio ratio-{{ media_size }}"{% if media_size == 'adapt' %} style="--se-aspect-ratio: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}>
    {% if product_card_product.featured_media != blank %}
    <picture class="{% if add_image_padding %}p-2 p-md-3{% endif %}">
      <img srcset="{{ product_card_product.featured_media | img_url: '200x' }} 200w, {{ product_card_product.featured_media | img_url: '250x' }} 250w, {{ product_card_product.featured_media | img_url: '310x' }} 310w, {{ product_card_product.featured_media | img_url: '400x' }} 400w, {{ product_card_product.featured_media | img_url: '500x' }} 500w, {{ product_card_product.featured_media | img_url: '620x' }} 620w, {{ product_card_product.featured_media | img_url: '750x' }} 750w, {{ product_card_product.featured_media | img_url: '930x' }} 930w"
      src="{{ product_card_product.featured_media | img_url: '533x' }}"
      sizes="(min-width: 1264px) 300px, (min-width: 1024px) 250px, (min-width: 768px) 250px, (min-width: 600px) calc((100vw - 48px) / 3), calc(100vw - 32px)"
      alt="{{ product_card_product.featured_media.alt | escape }}"
      loading="lazy"
      class="w-100 h-100 object-fit-cover"
      width="{{ product_card_product.featured_media.width }}"
      height="{{ product_card_product.featured_media.height }}">
    </picture>
    {%- if product_card_product.media[1] != nil and show_secondary_image !=blank -%}
    <picture class="{% if add_image_padding %}p-3{% endif %} opacity-0">
      <img srcset="{{ product_card_product.media[1] | img_url: '200x' }} 200w, {{ product_card_product.media[1] | img_url: '250x' }} 250w, {{ product_card_product.media[1] | img_url: '310x' }} 310w, {{ product_card_product.media[1] | img_url: '400x' }} 400w, {{ product_card_product.media[1] | img_url: '500x' }} 500w, {{ product_card_product.media[1] | img_url: '620x' }} 620w, {{ product_card_product.featured_media | img_url: '750x' }} 750w, {{ product_card_product.featured_media | img_url: '930x' }} 930w"
      src="{{ product_card_product.media[1] | img_url: '533x' }}"
      sizes="(min-width: 1264px) 300px, (min-width: 1024px) 250px, (min-width: 768px) 250px, (min-width: 600px) calc((100vw - 48px) / 3), calc(100vw - 32px)"
      alt="{{ product_card_product.media[1].alt | escape }}"
      loading="lazy"
      class="w-100 h-100 object-fit-cover"
      width="{{ product_card_product.media[1].width }}"
      height="{{ product_card_product.media[1].height }}">
    </picture>
    {% endif %}
    {% else %}
    <picture class="{% if add_image_padding %}p-3{% endif %}">
      <div class="object-fit-cover img-placeholder h-100">
        {{ 'product-3' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
      </div>
    </picture>
    {% endif %}
  </figure>
  <div class="card-body px-0 pt-5 pb-0 position-relative">
    <div class="py-2 position-absolute start-50 top-0 translate-middle-x small fs-product-sale-tag">
      {%- if product_card_product.available == false -%}
        <span class="fw-normal text-secondary" aria-hidden="true">
          {{ 'products.product.sold_out' | t }}
        </span>
      {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
        <span class="fw-normal text-primary" aria-hidden="true">
          {{ 'products.product.on_sale' | t }}
        </span>
      {%- endif -%}
    </div>
    <div class="card-text text-center product-card-text product-price-center">
      {%- if show_vendor -%}
        <p class="mb-0 text-muted small fs-product-vendor">{{ product_card_product.vendor }}</p>
      {%- endif -%}
      <p class="fw-bold mb-0 fs-product-title">{{ product_card_product.title }}</p>
      <div class="mt-2">
        {% render 'price', product: product_card_product, price_class: '' %}
      </div>
    </div>
  </div>
</div>
